<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>基础网站练习</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <ul>
      <li><a href="#">主页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>

  <!-- 页面标题 -->
  <h1>欢迎来到我的网站</h1>
  <p>这是我的个人网站，在这里我将分享我的兴趣和爱好。</p>

  <!-- 主内容区和侧边栏容器 -->
  <div class="container">
    <!-- 主内容区 -->
    <main class="main-content">
      <h2>我的兴趣爱好</h2>
      <p>我喜欢编程、阅读和旅行。在编程方面，我正在学习网页开发，熟悉 HTML 和 CSS。</p>
      <img src="https://img2.baidu.com/it/u=2422891948,2296715234&fm=253&fmt=auto&app=138&f=PNG?w=500&h=297"
        alt="我的兴趣图片">
    </main>

    <!-- 侧边栏 -->
    <aside class="sidebar">
      <h3>相关链接</h3>
      <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
        <li><a href="#">链接4</a></li>
        <li><a href="#">链接5</a></li>
        <li><a href="#">链接6</a></li>
      </ul>
    </aside>
  </div>

  <!-- 页脚 -->
  <footer class="footer">
    <p>版权所有 © 2023 你的名字</p>
  </footer>

  <!-- 回到顶部按钮 -->
  <div class="back-to-top">
    <a href="#">回到顶部</a>
  </div>
</body>

</html>